<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>基于 0penHarmony、Hi3861 的智慧矿井-可视化</title>
  <script src="js/echarts.min.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    body,
    html {
      width: 100%;
      margin: 0;
      background-image: url('bj.jpg');
      background-size: contain;
      background-repeat: no-repeat;
      color: #ccc;
    }

    div {
      width: 100%;
      border: 0px dotted blue;
    }

    .mapCss {
      margin-top: 6px;
      height: 98%;
      width: 97%;
      border-radius: 10px;
      box-shadow: 0px -5px 4px 0px #2279ee,
        -6px 0px 4px 0px #2279ee,
        6px 0px 4px 0px #2279ee,
        0px 5px 4px 0px #2279ee;
    }

    /* 基础表格样式 */
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: 'Arial', sans-serif;
      margin: 20px 0;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

    /* 表头样式 */
    th {
      background: linear-gradient(135deg, #2c7bb6, #3498db);
      color: #fff;
      font-weight: 600;
      padding: 14px 16px;
      text-align: left;
      border-bottom: 2px solid #2980b9;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

    /* 表格单元格样式 */
    td {
      padding: 12px 16px;
      border-bottom: 1px solid #ecf0f1;
      transition: background 0.3s ease;
    }

    /* 隔行变色效果 */
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    /* 鼠标悬停效果 */
    tr:hover {
      background-color: #e6f7ff;
    }

    /* 圆角边框 */
    table {
      border-radius: 6px;
      overflow: hidden;
    }

    /* 响应式设计 */
    @media screen and (max-width: 600px) {
      table {
        border: 0;
      }

      table thead {
        display: none;
      }

      table tr {
        margin-bottom: 10px;
        display: block;
        border: 1px solid #ddd;
      }

      table td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted #ccc;
      }

      table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
      }
    }
  </style>
  <style>
    .slider-container {
      width: 80%;
      position: relative;
      border: 1px solid #e2e2e2;
      left: 50%;
      transform: translateX(-50%);
      top: -60px;
      background-color: #e2e2e2;
      padding-left: 4px;
      padding-right: 4px;
      border-radius: 6px;
      color: #007bff;
    }

    #slider {
      width: 100%;
    }

    #sliderValue {
      position: absolute;
      top: -22px;
      left: 4px;
      background: #007bff;
      color: white;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div style="text-align: center;border-bottom:0px;">
    <h2>基于 0penHarmony、Hi3861 的智慧矿井-可视化</h2>
  </div>
  <!--
  <div style="height: 100px;">
    <form id="form1">

      当前温度：<input type="number" name="wendu" value="35">
      空气湿度：<input type="number" name="jiawan" value="20">

      风机状态：<input type="number" name="fengji" value="1"><br />
      人体检查：<input type="number" name="renti" value="0">

      探照灯状态：<input type="number" name="tanzhaodeng" value="1">
      报警状态：<input type="number" name="baojing" value="0"><br />

      蜂鸣器：<input type="number" name="fengmingqi" value="0">
      厂况状态：<input type="number" name="zhuangtai" value="0">

    </form>
    <button onclick="addIOTMsg()">新增数据</button>
  </div>
  -->
  <div style="border-top:0px;">
    <div style="width: 33%;height:400px; float: left;">
      <div id="jiawan" class="mapCss"></div>
    </div>

    <div style="width: 33%;height:400px; float: left;">
      <div id="wendu" class="mapCss"></div>
    </div>

    <div style=" width: calc(100% - 66%);height:400px; float: right;">
      <div id="kaiguan" style="border-right: 0px;" class="mapCss"></div>
    </div>
  </div>
  <div style="margin-top: 8px; float: left;">
    <div>
      <div style="width: 33%;height:400px; float: left;">
        <div id="duoji" class="mapCss">舵机</div>
        <div class="slider-container">
          <span id="sliderValue">0</span>
          当前角度<input type="range" min="0" max="360" step="1" value="0" id="slider">
        </div>
      </div>
    </div>

    <div style="width: 33%;height:400px; float: left;">
      <div id="rentiganzhi" class="mapCss"></div>
    </div>

    <div style=" width: calc(100% - 66%);height:400px; float: right;">
      <div style="text-align: center;" class="mapCss">
        <button onclick="showDate()">显示历史数据</button>
      </div>
    </div>
  </div>
  </div>
  <div id="message" style="height: 60px;float: left;"></div>
  <div style="float: left;">
    <table id="abc" style="width: 100%;"></table>
  </div>

  <script src="js/jiawan.js"></script>
  <script src="js/wendu.js"></script>
  <script src="js/kaiguan.js"></script>
  <script src="js/duoji.js"></script>
  <script src="js/rentiganzhi.js"></script>
  <script>

    var websocket = null;
    var clientId = Math.random().toString(36).substr(2);

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
      //连接WebSocket节点
      websocket = new WebSocket("ws://localhost/ws/" + clientId);
    }
    else {
      alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
      setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
      setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
      setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
      setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
      websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
      var jsonObject = JSON.parse(innerHTML);

      option_jiawan.series[0].data[0].value = jsonObject.jiawan
      myChart_jiawan.setOption(option_jiawan);

      option_wendu.series[0].data[0].value = jsonObject.wendu
      myChart_wendu.setOption(option_wendu);

      option_rentiganzhi.series[0].data[0].value = jsonObject.rentiganzhi
      myChart_rentiganzhi.setOption(option_rentiganzhi);

      /**
           if(jsonObject.fengmingqi == 1){
              isOn = true
              updateChart()
           }else{
              isOn = false
              updateChart()
           }
      **/
      document.getElementById('message').innerHTML = innerHTML + '<br/>';
    }

    //发送消息
    function send() {
      var message = document.getElementById('text').value;
      websocket.send(message);
    }

    //发送数据给后端，后端接受到数据保存到数据库同时推送到前端
    function addIOTMsg() {
      var form = document.getElementById("form1");
      var formData = {};
      for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.tagName.toLowerCase() !== "button") {
          formData[element.name] = element.value;
        }
      }
      console.log(formData);
      websocket.send(JSON.stringify(formData));
    }

    function showDate() {
      // 向给定ID的用户发起请求
      axios.get('/mybatisdemo/iot/queryiotall')
        .then(function (response) {
          // 处理成功情况
          var msg = response.data;
          console.log(msg);
          var a = '<tr><th>id</th><th>温度</th><th>空气湿度</th>' +
            '<th>风机状态</th><th>人员检测</th/><th>探照灯状态</th>' +
            '<th>报警状态</th><th>蜂鸣器</th><th>厂况状态</th><th>数据采集时间</th>' +
            '</tr>';

          for (let i = 0; i < msg.length; i++) {
            let renyuanzhangtai = msg[i].renti == 0 ? '无' : '有人'
            a += '<tr>' +
              '<td>' + msg[i].id + '</td>' +
              '<td>' + msg[i].wendu + '</td>' +
              '<td>' + msg[i].jiawan + '</td>' +
              '<td>' + msg[i].fengji + '</td>' +
              '<td>' + renyuanzhangtai + '</td>' +
              '<td>' + msg[i].tanzhaodeng + '</td>' +
              '<td>' + msg[i].baojing + '</td>' +
              '<td>' + msg[i].fengmingqi + '</td>' +
              '<td>' + msg[i].zhuangtai + '</td>' +
              '<td>' + msg[i].createtime + '</td>' +
              '</tr>';
          }

          document.getElementById("abc").innerHTML = a;
          console.log(a);
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        })
        .finally(function () {
          // 总是会执行
        });
    }

    //关闭连接
    function closeWebSocket() {
      websocket.close();
    }
  </script>
</body>

</html>